/**
* 基础订单 订单管理 订单列表
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'#'}">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true"  class="user-search" style="margin-left: 14px;">
      <el-form-item label="支付状态：">
        <el-select placeholder="订单状态" v-model="indentInfo.indent_id" style="width: 50%;">
          <el-option label="全部" :value="0"></el-option>
          <el-option label="已支付" :value="1"></el-option>
          <el-option label="待支付" :value="2"></el-option>
          <el-option label="退款中" :value="3"></el-option>
          <el-option label="已退款" :value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期范围：" style="margin-left: -70px;">
        <!-- v-model="form.starttime" -->
        <el-date-picker type="date" placeholder="开始日期" style="width: 26%;" value-format="yyyy-MM-dd"></el-date-picker>
        -
        <!-- v-model="form.endtime" -->
        <el-date-picker type="date" placeholder="结束日期" style="width: 26%;" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="关键词：">
        <el-input size="small" placeholder="请输入订单号" v-model="indentInfo.indent_id"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <div class="order" style="margin-left: 24px;">
      <!-- v-for="(item,index) of show_list" :key="index" -->
      <div v-for="(item,index) in listData" :key="index">
        <div class="order-01">
          <div>
            <el-row style="line-height: 32px;">
              <el-col :span="2">
                <div><span class="cu">订单号：</span>{{item.indent_id}}</div>
              </el-col>
              <el-col :span="2">
                <div><span class="cu">桌号：</span>{{item.table_num}}</div>
              </el-col>
              <el-col :span="3">
                <div><span class="cu">就餐人数：</span>{{item.people_num}}</div>
              </el-col>
              <el-col :span="3">
                <div><span class="cu">应付金额：</span>￥{{item.pay_price}}</div>
              </el-col>
              <el-col :span="3">
                <div><span class="cu">实付金额：</span>￥{{item.pay_price}}</div>
              </el-col>
              <el-col :span="5">
                <div><span class="cu">创建日期：</span>{{item.add_time|timestampToTime}}</div>
              </el-col>
              <el-col :span="5">
                <div><span class="cu">修改日期：</span>{{item.update_time|timestampToTime}}</div>
              </el-col>
            </el-row>
            <el-row style="margin-top: 10px;line-height: 42px;">
              <el-col :span="2">
                <div>
                  <el-button size="mini" type="info" :disabled="true">{{item.indent_status_name}}</el-button>
                </div>
              </el-col>
              <el-col :span="3" style="float: right;margin-right: 156px;">
                <div><span class="cu">操作员：</span>{{item.username}}</div>
              </el-col>
              <el-col :span="3" style="float: right;margin-right: 110px;">
                <div><span class="cu">用户昵称：</span>{{item.nickname}}</div>
              </el-col>
            </el-row>
          </div>
          <div class="order-01-2">
            <!-- v-for="(ite,index) of item.ordergoods" :key="index" -->
            <div class="order-01-2-01" v-for="(value,demo) in item.dishesList" :key="demo">
              <!-- v-if="!ite.pic" -->
              <img style="width: 6.5rem; height: 6.5rem;" :src="value.dishes_cover" />
              <!-- <img style="width: 6.5rem; height: 6.5rem;" v-else :src="geting+ite.pic" /> -->
              <div class="order-01-2-01-name">{{value.dishes_name}}&nbsp;x{{value.number}}</div>
            </div>
          </div>
          <el-row style="margin-right: 120px;">
            <el-col :span="2" style="float: right;">
              <div>
                <!-- @click="print_tik(item.order_num)" v-if="item.payment_state == 1" -->
                <el-button style="margin-left: 10px" type="info" size="mini" slot="reference" @click="handleEdit(item)">打印小票</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="BH10"></div>
      </div>
    </div>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <div>
        <el-row>
          <el-col :span="12" style="margin:0px 0px 20px 140px;">
            <div><span class="cu" style="font-size: 22px;font-weight: 700;">结账单</span></div>
          </el-col>
        </el-row>
        <div style="padding-left: 20px;">
          <el-row>
            <el-col :span="8">
              <div><span class="cu">桌号：</span><span style="font-size: 20px;font-weight: 700px;">{{editFrom.table_num}}</span></div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div><span class="cu">订单号：</span>{{editFrom.indent_id}}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div><span class="cu">操作工号：</span>{{editFrom.staff_id}}</div>
            </el-col>
            <el-col :span="6">
              <div><span class="cu">人数：</span><span style="font-size: 18px;font-weight: 700px;">{{editFrom.people_num}}</span></div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div><span class="cu">下单时间：</span>{{editFrom.add_time|timestampToTime}}</div>
            </el-col>
          </el-row>
        </div>
        <el-row class="note-line" style="margin-bottom: -6px;"></el-row>
        <el-row class="note-line"></el-row>
        <div style="padding-left: 20px;">
          <el-row>
            <el-col :span="8">
              <div><span class="cu">菜品名称</span></div>
            </el-col>
            <el-col :span="4">
              <div><span class="cu">单价</span></div>
            </el-col>
            <el-col :span="4">
              <div><span class="cu">数量</span></div>
            </el-col>
            <el-col :span="4">
              <div><span class="cu">小计</span></div>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px;" v-for="(value,demo) in editFrom.dishesList" :key="demo">
            <el-col :span="8">
              <div><span class="cu">{{value.dishes_name}}</span></div>
            </el-col>
            <el-col :span="4">
              <div><span class="cu">￥{{value.dishes_price}}</span></div>
            </el-col>
            <el-col :span="3">
              <div><span class="cu">&nbsp;&nbsp;x{{value.number}}</span></div>
            </el-col>
            <el-col :span="4">
              <div><span class="cu">￥{{value.dishes_price*value.number}}</span></div>
            </el-col>
          </el-row>
        </div>
       <el-row class="note-line"></el-row>
        <div style="padding-left: 20px;">
          <el-row>
            <el-col :span="4">
              <div><span class="cu">合计</span></div>
            </el-col>
            <el-col :span="3" style="margin-left: 140px;">
              <div><span class="cu">&nbsp;&nbsp;1</span></div>
            </el-col>
            <el-col :span="6" style="float: right;margin-right: 50px;">
              <div><span class="cu" style="font-size: 18px;font-weight: 700px;">￥{{editFrom.pay_price}}</span></div>
            </el-col>
          </el-row>
        </div>
        <el-row class="note-line" style="margin-bottom: -6px;"></el-row>
        <el-row class="note-line"></el-row>
        <div style="padding-left: 20px;">
          <el-row>
            <el-col :span="12">
              <div><span class="cu">打印时间：</span>{{editFrom.update_time|timestampToTime}}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div><span class="cu">欢迎光临 , 本店！</span></div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div><span class="cu">订座电话：</span>021-45862642</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div><span class="cu">营业时间：</span>10:00 - 22:30</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="print_tik(item2.indent_id)">确认打印</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    IndentList,
    IndentAdd,
    IndentUpdate,
    IndentDelete,
  } from '../../api/adminMG'
  import {
    getStore
  } from '../../utils/util'
  import Pagination from '../../components/Pagination'
  export default {
    data() {
      return {
        show_app: '全部',
        nshow: true, //switch开启
        fshow: false, //switch关闭
        loading: false, //是显示加载
        editFormVisible: false, //控制编辑页面显示与隐藏
        title: '打印小票',
        editFrom:{
        },
        formInline: {
          page: 1,
          limit: 10,
          varLable: '',
          varName: '',
          token: localStorage.getItem('logintoken')
        },
        indentInfo:{
          indent_status:0,
          indent_id:''
        },
        // 删除部门
        seletedata: {
          ids: '',
          token: localStorage.getItem('logintoken')
        },
        userparm: [], //搜索权限
        listData: [], //用户数据
        // 分页参数
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 10
        }
      }
    },
    // 注册组件
    components: {
      Pagination
    },
    /**
     * 数据发生改变
     */

    /**
     * 创建完毕
     */
    created() {
      // this.getdata(this.formInline);
      this.getIndentList(this.indentInfo);
    },
    watch:{
      'indentInfo.indent_status':function(newVal,oldVal){
        // console.log('newVal',newVal,'oldVal',oldVal)
        if(newVal != oldVal){
          // console.log("请求订单列表")
          this.indentInfo.indent_status = newVal;
          this.getIndentList(this.indentInfo)
        }
      }
    },
    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      // 获取订单列表
      getIndentList(parameter) {
        this.loading = true
        IndentList(parameter)
          .then(res => {
            this.loading = false
            if (res.status == 0) {
              this.$message({
                type: 'success',
                message: "获取数据成功"
              })
              console.log("请求订单列表", res.data.indentList,"订单状态",res.data.indent_status);
              this.listData = res.data.indentList;
              if (this.listData.length > 0) {
                this.show_input = true
              } else {
                this.$message({
                  showClose: true,
                  message: "该订单状态下暂无订单数据",
                  type: "warning"
                });
              }
              //   // 分页赋值
              //   this.pageparm.currentPage = this.formInline.page
              //   this.pageparm.pageSize = this.formInline.limit
              //   this.pageparm.total = res.count
            } else {
              this.$message({
                type: 'warning',
                message: "获取订单列表失败"
              })
            }
          })
          .catch(err => {
            this.loading = false
            this.$message.error('订单加载失败，请稍后再试！')
          })
      },
      // 分页插件事件
      callFather(parm) {
        this.formInline.page = parm.currentPage
        this.formInline.limit = parm.pageSize
        this.getdata(this.formInline)
      },
      // 搜索事件
      search() {
        this.getIndentList(this.indentInfo)
        // this.getdata(this.formInline)
      },
      handleEdit:function(Data){
        console.log("Data",Data)
        this.editFormVisible = true
        if (Data != undefined && Data != 'undefined') {
          this.editFrom = Data
        }
        console.log("editFrom",this.editFrom,"Data",Data)
      },
      //显示打印界面
      print_tik: function(indent_id) {
        let indentData = {};
        indentData.indent_id = indent_id;
        indentData.staff_id = getStore('staffInfo').staff_id;
        this.$confirm('确认打印？', '提示', {
        	confirmButtonText: '确定',
        	cancelButtonText: '取消',
        	type: 'info'
        }).then(() => {
        	this.$message({
        		type: 'success',
        		message: '打印中...'
        	});
        	setTimeout(()=>{
        		this.updateStaff(indentData);
        	},4000)
        })
      },
      //订单编辑
      updateStaff(indentData){
        console.log('indentData',indentData);
        // return false
        IndentUpdate(indentData)
          .then(res => {
            // this.editFormVisible = false
            this.loading = false
            console.log("订单编辑", res)
            if (res.data.result) {
              this.$message({
              	type: 'success',
              	message: '打印成功'
              });
              // this.$message({
              //   type: 'success',
              //   message: "订单编辑成功"
              // })
              // this.getStaff();
            } else {
              this.$message({
                type: 'warning',
                message: "订单编辑失败!！"+res.message
              })
            }
          })
          .catch(err => {
            // this.editFormVisible = false
            this.loading = false
            this.$message.error('订单编辑失败，请稍后再试！')
          })
      },
      // 关闭编辑、增加弹出框
      closeDialog() {
        this.editFormVisible = false
      }
    }
  }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }

  .order {
    text-align: left;
    // color: #6F6F6F;
  }

  .BH10 {
    height: 10px;
    background-color: #F0F0F0;
  }

  .cu {
    // font-weight: 600;
    color: #777;
    font-size: 0.9rem;
  }

  .order-01 {
    margin: 20px 0;
    padding-left: 15px;
  }

  .order-01-2 {
    display: flex;
    padding: 25px 0 0 15px;
    flex-wrap: wrap;
  }

  .order-01-2-01 {
    width: 150px;
    margin-right: 50px;
    margin-bottom: 20px;
  }

  .order-01-2-01 img {
    margin-bottom: 15px;
    width: 150px;
    height: 150px;
    margin-left: 20px;
  }

  .order-01-2-01-name {
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
  }
  .note-line{
    border-bottom: 1px dashed #000000;
    margin: 10px 0px;
    width: 330px;
    margin-left: 10px;
  }
</style>
